<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <style>
        .box{
            pointer-events: none;
            color: lightgrey;
        }
    </style>
</head>
<body>
<p>
    <a href="addstudent.html">增加学生</a>
</p>

<p>
<form action="student.do" method="get" id="searchForm">
    <input type="hidden" name="pageNo" value="1"/>
    <input type="search" placeholder="姓名" name="sname" value=""/>
    <input type="search" placeholder="电话" name="tel" value=""/>
    入学时间从<input type="date" placeholder="yyyy-MM-dd" name="dateStart" value=""/>
    -<input type="date" placeholder="yyyy-MM-dd" name="dateEnd" value=""/>
    <input type="submit" value="搜索" id="search"/>
</form>
</p>
<table border="1" cellpadding="0" cellspacing="0" id="queryTable">

    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>QQ</th>
        <th>Wechat</th>
        <th>手机</th>
        <th>性别</th>
        <th>入学时间</th>
        <th>操作</th>
    </tr>


</table>
<div id="pager">

    <a   href="#" data-page="1" id="first">第一页</a>

    <a   href="#" data-page="" id="prev">上一页</a>
    <input type="number" id="goNum" value="" max="" min="1" style="width: 40px"/>
    <button id="go" type="button">Go</button>
    <a href="#"  data-page="" id="next">下一页</a>
    <a href="#" data-page="" id="last">最后一页</a>
    共有<span id="count"></span>人
</div>
<script>
    $(function () {
        var pageNo=1,sname="",phone="",dateStart="",dateEnd="";

        $("form").submit(function () {
            pageNo=1;//?
            sname=$("input[name=sname]").val();
            phone=$("input[name=tel]").val();
            dateStart=$("input[name=dateStart]").val();
            dateEnd=$("input[name=dateEnd]").val();

            doLoad();
            return false;
        });
        function doLoad(){
            $.get("stuAjax.do",{pageNo:pageNo,sname:sname,tel:phone,dateStart:dateStart,dateEnd:dateEnd},function (page) {
                //page有分页的信息：
                //$("#pager a#first").attr("data-page",1);
                $("#pager a#first").attr("data-page",1);
                $("#pager a#prev").attr("data-page",page.pageNo-1);
                $("#pager a#next").attr("data-page",page.pageNo+1);
                $("#pager a#last").attr("data-page",page.pageTotal);
                $("#goNum").val(page.pageNo);
                $("#goNum").attr("max",page.pageTotal);
                $("#count").text(page.count);

                if(page.pageNo<=1){
                    $("#pager a#first").addClass("box");
                    $("#pager a#prev").addClass("box");
                }else{
                    $("#pager a#first").removeClass("box");
                    $("#pager a#prev").removeClass("box");
                }
                if(page.pageNo>=page.pageTotal){
                    $("#pager a#next").addClass("box");
                    $("#pager a#last").addClass("box");
                }else{
                    $("#pager a#next").removeClass("box");
                    $("#pager a#last").removeClass("box");
                }

                let tab=$("#queryTable");
                tab.find("tr:gt(0)").remove();
                $.each(page.datas,function (i,s) {
                    let t=$("<tr></tr>");
                    t.append("<td>"+s.stuno+"</td>");
                    t.append("<td>"+s.sname+"</td>");
                    t.append("<td>"+s.QQ+"</td>");
                    t.append("<td>"+s.wechat+"</td>");
                    t.append("<td>"+s.telephone+"</td>");
                    t.append("<td>"+s.sex+"</td>");
                    t.append("<td>"+(s.enterdate==undefined?"":s.enterdate)+"</td>");
                    t.append("<td><a href='#'>修改</a><a href='#'>删除</a> </td>");

                    tab.append(t);
                })
            });
        }
        doLoad();//第一次加载
        $("#pager #go").click(function () {
            let p=$(this).prev().val();
            if(p<1)
                return;
            //if(p>1)
            //    return;

            //$("#searchForm [name=pageNo]").val(p);
           // $("#searchForm").submit();
            pageNo=p;
            doLoad();
            return false;
        });
        $("#pager a").click(function () {
            let p=$(this).attr("data-page");

            let max=parseInt($("#pager a#last").attr("data-page"));

            if(p<1)
                return;
            if(p>max)
                return;

            pageNo=p;
            doLoad();
            return false;
        });
    });
</script>
</body>
</html>